<script setup>
import { ref, reactive } from 'vue'
import { feedbackAPI } from '@/api/login'

const form = reactive({
  content: '',
  files: '',
})

// 文本框
const inputChange = (event) => {
  console.log(event.detail)
}

const getData = (data) => {
  console.log(data, '14===')
  const { imageList } = data
  form.files = JSON.stringify(imageList)
}

const submit = async () => {
  if (!form.content) {
    return uni.showToast({ title: '请输入您的反馈意见', icon: 'none' })
  }
  await feedbackAPI(form)
  uni.showToast({ title: '反馈成功', icon: 'none' })
  setTimeout(() => {
    uni.navigateBack()
  }, 500)
}
</script>

<template>
  <view class="feedback">
    <view class="textarea-view">
      <textarea
        class="textarea"
        v-model="form.content"
        @input="inputChange"
        maxlength="200"
        placeholder-style="color:#999999"
        placeholder="请输入您的反馈意见，最多支持200字"
      />
      <view class="count">({{ form.content.length }}/200)</view>
      <easy-upload @change="getData" />
    </view>
    <view @click="submit" class="submit">提交</view>
  </view>
</template>

<style lang="scss" scoped>
.feedback {
  padding: 24rpx 48rpx;
  .form {
    .form-item {
      margin-bottom: 32rpx;
      display: flex;
      align-items: center;
      .label {
        width: 120rpx;
        font-size: 28rpx;
        color: rgba(51, 51, 51, 1);
        margin-right: 16rpx;
      }
      .uni-input,
      .value {
        padding: 0 34rpx;
        flex: 1;
        height: 90rpx;
        border-radius: 12rpx;
        background: rgba(245, 245, 245, 0.6);
        backdrop-filter: blur(4px);
      }
      .value {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 28rpx;
        color: #999999;
        .right-icon {
          image {
            width: 16rpx;
            height: 24rpx;
          }
        }
      }
    }
  }

  .textarea-view {
    border-radius: 16rpx;

    padding: 36rpx 28rpx;
    width: 100%;
    // height: 690rpx;
    background: #f5f5f5;
  }
  .textarea {
    width: 100%;
    height: 410rpx;
  }

  .count {
    font-size: 28rpx;
    color: #999999;
    margin-bottom: 32rpx;
  }

  .select-file {
    image {
      width: 36rpx;
      height: 34rpx;
    }
  }

  .submit {
    margin-top: 94rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90rpx;
    border-radius: 10rpx;
    background: #ea5506;
    font-size: 32rpx;
    font-weight: 700;
    color: rgba(255, 255, 255, 1);
  }

  ::v-deep {
    .file-picker__box-content {
      background: #ffffff;
    }
  }
}

.limit2 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: nowrap;
}
.limit3 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: nowrap;
}
</style>
